import React, { Component } from "react";
import axios from "axios";
import { SearchBar } from "antd-mobile";
import styles from "./GoodList.module.scss";

export default class GoodList extends Component {
  state = {
    mixgoodlist: [], //综合选项卡需要的数据
    pricegoodlist: [],
    typegoodlist: [],
    active: "mix",
    down: "",
    up: "",
    typetabList: [], //类型选项卡下的说有类型
  };
  async componentDidMount() {
    let goodlist = await axios.get(
      "/api/xhr/search/search.json?__timestamp=1606131307757&needPopWindow=true&searchWordSource=8&stillSearch=false&_stat_search=hot&itemId=0&size=40&upperPrice=-1&floorPrice=-1&matchType=0&categoryId=0&descSorted=false&sortType=0&keyword=%E8%A1%8C%E6%9D%8E%E7%AE%B1"
    );
    // console.log(goodlist.data.data.directlyList);
    this.setState({
      mixgoodlist: goodlist.data.data.directlyList,
      pricegoodlist: goodlist.data.data.directlyList,
      typegoodlist: goodlist.data.data.directlyList,
    });
    //分类选项卡下的说有 类型
    let typetabList = await axios.get(
      "/api/xhr/search/search.json?__timestamp=1606268893279&needPopWindow=false&searchWordSource=8&stillSearch=false&_stat_search=hot&itemId=0&size=40&upperPrice=-1&floorPrice=-1&matchType=0&categoryId=0&descSorted=false&sortType=0&keyword=%E8%A1%8C%E6%9D%8E%E7%AE%B1"
    );
    // console.log(typetabList);
    // console.log(typetabList.data.data.categoryL1List);
    this.setState({
      typetabList: typetabList.data.data.categoryL1List,
    });
  }
  //点击切换选项卡
  handleTab = (e) => {
    // console.log(e.target.dataset.tab);
    let typeList = document.getElementById("typeList");
    if (e.target.dataset.tab === "type" && typeList) {
      typeList.style.display = "block";
    }
    let priceBox = document.getElementById("priceBox");
    if (e.target.dataset.tab === "price" && priceBox) {
      priceBox.style.display = "block";
    }
    this.setState({
      active: e.target.dataset.tab,
    });
  };

  handleDown = (e) => {
    this.setState({
      down: e.target.value,
    });
  };
  handleUp = (e) => {
    this.setState({
      up: e.target.value,
    });
  };

  //单击确定按钮
  handleYes = (params) => {
    // console.log(this.state.down,this.state.up);
    let arr = this.state.mixgoodlist.filter((v, i) => {
      return v.retailPrice >= this.state.down && v.retailPrice <= this.state.up;
    });
    this.setState({
      pricegoodlist: arr,
    });
    document.getElementById("priceBox").style.display = "none";
  };
  //排序 升序
  compareAsc = (property) => {
    return function (a, b) {
      let v1 = a[property];
      let v2 = b[property];
      return v1 - v2;
    };
  };
  //降序
  compareDesc = (property) => {
    return function (a, b) {
      let v1 = a[property];
      let v2 = b[property];
      return v2 - v1;
    };
  };
  //点击从低到高按钮
  handleDownToUp = (property) => {
    let newArr = this.state.pricegoodlist.sort(this.compareAsc("retailPrice"));
    this.setState({
      pricegoodlist: newArr,
    });
    document.getElementById("priceBox").style.display = "none";
  };
  //点击从高到低
  handleUpToDown = (property) => {
    let newArr = this.state.pricegoodlist.sort(this.compareDesc("retailPrice"));
    this.setState({
      pricegoodlist: newArr,
    });
    document.getElementById("priceBox").style.display = "none";
  };
  // 点击分类的每个item
  handleItemType = (id) => {
    let res = axios
      .get(
        "/api/xhr/search/search.json?__timestamp=1606271610901&keyword=%E8%A1%8C%E6%9D%8E%E7%AE%B1&sortType=0&categoryId=" +
          id +
          "&matchType=1&floorPrice=-1&upperPrice=-1&size=40&itemId=0&stillSearch=false&searchWordSource=8&needPopWindow=false"
      )
      .then((res) => {
        // console.log(res);
        let typegoodlist = res.data.data.directlyList;
        this.setState({
          typegoodlist: typegoodlist,
        });
      });
    document.getElementById("typeList").style.display = "none";
  };

  render() {
    return (
      <div>
        <div className={styles.top}>
          <SearchBar
            placeholder="行李箱"
            cancelText="搜索"
            onChange={this.handleChange}
          />
          <div className={styles.tabType} onClick={this.handleTab}>
            <div
              data-tab="mix"
              className={
                this.state.active === "mix"
                  ? styles.active + " " + styles.tab1
                  : styles.tab1
              }
            >
              综合
            </div>
            <div
              data-tab="price"
              className={
                this.state.active === "price"
                  ? styles.active + " " + styles.tab1
                  : styles.tab1
              }
            >
              价格
            </div>
            <div
              data-tab="type"
              className={
                this.state.active === "type"
                  ? styles.active + " " + styles.tab1
                  : styles.tab1
              }
            >
              分类
            </div>
          </div>
        </div>

        <div className={styles.tabWrap}>
          {this.state.active === "mix" ? (
            <div>
              <ul className={styles.bagList}>
                {this.state.mixgoodlist.map((v, i) => {
                  return (
                    <li className={styles.bagItem} key={v.id}>
                      <img
                        className={styles.bagImg}
                        src={v.listPicUrl}
                        alt=""
                      />
                      <div className={styles.bagA}>{v.simpleDesc}</div>
                      <div className={styles.bagName}>{v.name}</div>
                      <div className={styles.bagPrice}>￥{v.retailPrice}</div>
                    </li>
                  );
                })}
              </ul>
            </div>
          ) : (
            ""
          )}
          {this.state.active === "price" ? (
            <div>
              <ul className={styles.bagList}>
                {this.state.pricegoodlist.map((v, i) => {
                  return (
                    <li className={styles.bagItem} key={v.id}>
                      <img
                        className={styles.bagImg}
                        src={v.listPicUrl}
                        alt=""
                      />
                      <div className={styles.bagA}>{v.simpleDesc}</div>
                      <div className={styles.bagName}>{v.name}</div>
                      <div className={styles.bagPrice}>￥{v.retailPrice}</div>
                    </li>
                  );
                })}
              </ul>

              <div className={styles.priceBox} id="priceBox">
                <div className={styles.select}>
                  筛选
                  <input
                    type="text"
                    name="down"
                    placeholder="最低价"
                    defaultValue={this.state.down}
                    onChange={this.handleDown}
                  />
                  —
                  <input
                    type="text"
                    name="up"
                    defaultValue={this.state.up}
                    placeholder="最高价"
                    onChange={this.handleUp}
                  />
                </div>
                <div className={styles.order}>
                  排序<span onClick={this.handleDownToUp}>从低到高</span>
                  <span onClick={this.handleUpToDown}>从高到低</span>
                </div>
                <div className={styles.btnTwo}>
                  <span>取消</span>
                  <span onClick={this.handleYes}>确定</span>
                </div>
              </div>
            </div>
          ) : (
            ""
          )}
          {this.state.active === "type" ? (
            <div>
              <ul className={styles.bagList}>
                {this.state.typegoodlist.map((v, i) => {
                  return (
                    <li className={styles.bagItem} key={v.id}>
                      <img
                        className={styles.bagImg}
                        src={v.listPicUrl}
                        alt=""
                      />
                      <div className={styles.bagA}>{v.simpleDesc}</div>
                      <div className={styles.bagName}>{v.name}</div>
                      <div className={styles.bagPrice}>￥{v.retailPrice}</div>
                    </li>
                  );
                })}
              </ul>
              <ul className={styles.typeList} id="typeList">
                {this.state.typetabList.map((v, i) => {
                  return (
                    <li
                      key={v.id}
                      onClick={this.handleItemType.bind(this, v.id)}
                    >
                      {v.name}
                    </li>
                  );
                })}
              </ul>
            </div>
          ) : (
            ""
          )}
        </div>
      </div>
    );
  }
}
